<template>
  <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    width="78%"
    custom-class="custom-dialog"
    :before-close="handleClose"
    @open="initData"
  >
    <div class="dialog">
      <el-row :gutter="2">
        <el-col :span="11">
          <div>
            <el-table
              :data="patrolData"
              border
              :show-header="false"
              style="width: 100%"
              class="table"
              :cell-style="columnStyle"
            >
              <el-table-column prop="date" width="130px"></el-table-column>
              <el-table-column prop="value"></el-table-column>
            </el-table>
          </div>
          <div class="instructions">
            检查结果说明<span> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></span>
          </div>
          <div class="textBox">
            {{ situation }}
          </div>
          <div class="endImg">
            <el-row v-for="(item, index) in src" :key="index">
              <el-col>
                <el-image
                  style="width: 120px; height: 120px"
                  :src="item"
                  :preview-src-list="src"
                >
                  <div slot="placeholder">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" :offset="1">
          <div>
            <el-row :gutter="21" class="titNum">
              <el-col :span="8" class="blueBg"
                >检查事项: {{ checkCount }} 项</el-col
              >
              <el-col :span="8" class="greenBg"
                >合规事项: {{ checkCount - unqualified }} 项</el-col
              >
              <el-col :span="8" class="redBg"
                >违规事项: {{ unqualified }} 项</el-col
              >
            </el-row>
          </div>
          <div class="tableCheck">
            <el-table :data="checkData" border style="width: 100%">
              <el-table-column type="index" width="50px"> </el-table-column>
              <!-- <el-table-column prop="pname" label="检查类型"> </el-table-column> -->
              <el-table-column prop="itemName" label="检查事项">
              </el-table-column>
              <el-table-column label="是否合规" width="80px">
                <template slot-scope="scope">
                  <template v-if="scope.row.satisfied == 0">
                    <span>是</span>
                  </template>
                  <template v-if="scope.row.satisfied == 1">
                    <span>否</span>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="pagination-panel">
            <Pagination
              :total="query.total"
              :page.sync="query.pageNum"
              :limit.sync="query.pageSize"
              @pagination="initData"
            />
          </div> -->
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import Pagination from "@/components/Pagination";
import { getUserStatistics1 } from "@/api/system/doubleRandomMatters";
import { getUserStatistics2 } from "@/api/system/doubleRandomMatters";
import { listManPatrolItem } from "@/api/system/inspectionItemRecord";
export default {
  components: {
    Pagination,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    obj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      tableData: [],
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      src: [],
      patrolData: [],
      checkData: [],
      unqualified: "",
      checkCount: "",
      situation: "",
    };
  },
  created() {
    // this.initData();
  },
  methods: {
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "background:rgba(150, 154, 184,0.05);font-weight: bolder;";
      }
    },
    handleClose() {
      this.$emit("closeDialog");
    },
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },
    initData() {
      this.select();
    },
    select() {
      this.src = [];
      // 查询事项列表
      listManPatrolItem(this.obj.id).then((res) => {
        this.checkData = res.data;
      });
      this.tableLoading = true;
      const query = JSON.parse(JSON.stringify(this.query));
      getUserStatistics2(query).then((res) => {}),
        getUserStatistics1(this.obj.id)
          .then((res) => {
            this.situation = res.data.situation;
            this.checkCount = res.data.checkCount;
            this.unqualified = res.data.unqualified;
            this.src.push(res.data.imageUrl);
            this.patrolData = [
              {
                date: "巡查对象:",
                value: res.data.unitName,
              },
              {
                date: "统一信用代码:",
                value: res.data.userId,
              },
              {
                date: "上报人:",
                value: res.data.nickName,
              },
              {
                date: "上报部门:",
                value: res.data.deptName,
              },
              {
                date: "上报时间:",
                value: res.data.createTime,
              },
              {
                date: "上报地址:",
                value: res.data.address,
              },
            ];
          })
          .catch(() => {
            this.tableLoading = false;
          });
    },
    clearData() {
      this.query = {
        total: 1,
        pageNum: 1,
        pageSize: 10,
      };
    },
  },
};
</script>
<style scoped lang="scss">
.dialog {
  height: 500px;
}
.table {
  font-size: 17px;
}
.instructions {
  font-size: 18px;
  color: #1189ef;
  line-height: 37.64px;
  // margin: 6px auto;
}
.instructions span {
  font-size: 18px;
  color: #e2e2e2;
}
.textBox {
  background: #f7f7f7;
  border: 1px solid #dbdcde;
  border-radius: 2px;
  font-size: 16px;
  color: #737373;
  padding: 6px 13px;
  height: 8em;
  overflow: auto;
}
.endImg {
  padding-top: 15px;
}
.endImg img:first-child {
  margin-left: 0px;
}
.titNum {
  padding-bottom: 10px;
  font-size: 20px;
}
.blueBg {
  padding: 7px 5px;
  background: -webkit-linear-gradient(left, #78c2fa, #ffffff) no-repeat;
}
.greenBg {
  padding: 7px 5px;
  background: -webkit-linear-gradient(left, #81ff92, #ffffff) no-repeat;
}
.redBg {
  padding: 7px 5px;
  background: -webkit-linear-gradient(left, #fa8778, #ffffff) no-repeat;
}
.flex div {
  display: flex;
}
</style>
